<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-lang='{"en": "Spark Dynamic Wallpaper Upload", "zh": "星火动态壁纸上传主页面"}'></title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #e6f7ff; /* 浅蓝色背景 */
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        /* 容器样式 */
        .container {
            background-color: #ffffff; /* 白色背景 */
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 400px;
            text-align: center;
        }

        /* 标题样式 */
        h1 {
            color: #0073e6; /* 深蓝色标题 */
            margin-bottom: 20px;
        }

        /* 提示信息样式 */
        .notice {
            color: #0073e6;
            font-size: 14px;
            margin-bottom: 20px;
        }

        /* 输入框样式 */
        input[type="text"], textarea, input[type="file"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #0073e6; /* 深蓝色边框 */
            border-radius: 5px;
            font-size: 16px;
        }

        textarea {
            resize: vertical; /* 允许垂直调整大小 */
        }

        /* 按钮样式 */
        button {
            background-color: #0073e6; /* 深蓝色按钮 */
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #005bb5; /* 鼠标悬停时更深的蓝色 */
        }

        /* 文件选择样式 */
        input[type="file"] {
            background-color: #f0f8ff; /* 浅蓝色背景 */
            padding: 10px;
            border: 1px dashed #0073e6; /* 深蓝色虚线边框 */
            border-radius: 5px;
            text-align: center;
            cursor: pointer;
        }

        input[type="file"]:hover {
            background-color: #e0f0ff; /* 鼠标悬停时更亮的蓝色 */
        }

        /* 进度条样式 */
        .progress-container {
            width: 100%;
            background-color: #f0f8ff;
            border-radius: 5px;
            margin: 10px 0;
            display: none; /* 默认隐藏 */
        }

        .progress-bar {
            width: 0%;
            height: 10px;
            background-color: #0073e6;
            border-radius: 5px;
            transition: width 0.3s ease;
        }

        /* 语言切换下拉菜单样式 */
        .language-switcher {
            margin-bottom: 20px;
            text-align: center;
        }

        .language-switcher select {
            padding: 5px 10px;
            border: 1px solid #0073e6;
            border-radius: 5px;
            background-color: #f0f8ff;
            color: #0073e6;
            font-size: 14px;
            cursor: pointer;
        }

        .language-switcher select:hover {
            background-color: #e0f0ff;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 语言切换下拉菜单 -->
        <div class="language-switcher">
            <select id="languageSelect" onchange="changeLanguage(this.value)">
                <option value="en">English</option>
                <option value="zh">中文</option>
            </select>
        </div>

        <!-- 标题 -->
        <h1 data-lang='{"en": "Spark Dynamic Wallpaper Upload", "zh": "星火动态壁纸上传主页面"}'></h1>

        <!-- 提示信息 -->
        <div class="notice" data-lang='{"en": "After approval, the video will be added to the download repository.", "zh": "审核成功后，视频会加入下载仓库。"}'></div>

        <!-- 上传表单 -->
        <form id="uploadForm">
            <label for="name" data-lang='{"en": "Name:", "zh": "名称："}'></label>
            <input type="text" id="name" name="name" required><br><br>

            <label for="description" data-lang='{"en": "Description:", "zh": "描述："}'></label>
            <textarea id="description" name="description" required></textarea><br><br>

            <label for="category" data-lang='{"en": "Category:", "zh": "类别："}'></label>
            <input type="text" id="category" name="category" required><br><br>

            <label for="author" data-lang='{"en": "Author:", "zh": "作者："}'></label>
            <input type="text" id="author" name="author" required><br><br>

            <!-- 封面图片上传 -->
            <label for="cover" data-lang='{"en": "Cover Image (optional):", "zh": "封面图片（可选）："}'></label>
            <input type="file" id="cover" name="cover" accept="image/*"><br><br>

            <label for="file" data-lang='{"en": "Video File:", "zh": "视频文件："}'></label>
            <input type="file" id="file" name="file" accept="video/*" required><br><br>

            <!-- 上传进度条 -->
            <div class="progress-container">
                <div class="progress-bar"></div>
            </div>

            <button type="submit" data-lang='{"en": "Upload", "zh": "上传"}'></button>
        </form>
    </div>

    <script>
        // 检测浏览器语言
        function detectBrowserLanguage() {
            const browserLanguage = navigator.language || navigator.userLanguage;
            if (browserLanguage.startsWith('zh')) {
                return 'zh'; // 中文
            } else {
                return 'en'; // 默认英文
            }
        }

        // 默认语言
        let currentLanguage = detectBrowserLanguage();

        // 初始化语言选择框
        document.getElementById('languageSelect').value = currentLanguage;

        // 切换语言函数
        function changeLanguage(lang) {
            currentLanguage = lang;
            updateTexts();
        }

        // 更新页面文本
        function updateTexts() {
            document.querySelectorAll('[data-lang]').forEach(element => {
                const translations = JSON.parse(element.getAttribute('data-lang'));
                element.textContent = translations[currentLanguage] || '';
            });
        }

        // 初始化页面文本
        updateTexts();

        // 文件上传逻辑
        document.getElementById('uploadForm').addEventListener('submit', function (e) {
            e.preventDefault();

            const fileInput = document.getElementById('file');
            const file = fileInput.files[0];

            // 检查文件大小（200MB = 200 * 1024 * 1024 字节）
            if (file.size > 200 * 1024 * 1024) {
                alert(currentLanguage === 'en' ? 'File size exceeds 200MB. Please choose a smaller file.' : '文件大小超过 200MB，请选择较小的文件。');
                return;
            }

            // 显示进度条
            const progressContainer = document.querySelector('.progress-container');
            const progressBar = document.querySelector('.progress-bar');
            progressContainer.style.display = 'block';
            progressBar.style.width = '0%';

            const formData = new FormData();
            formData.append('name', document.getElementById('name').value);
            formData.append('description', document.getElementById('description').value);
            formData.append('category', document.getElementById('category').value);
            formData.append('author', document.getElementById('author').value);

            // 封面图片（可选）
            const coverInput = document.getElementById('cover');
            if (coverInput.files.length > 0) {
                formData.append('cover', coverInput.files[0]);
            }

            formData.append('file', file);

            // 使用 XMLHttpRequest 监听上传进度
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload', true);

            xhr.upload.onprogress = function (event) {
                if (event.lengthComputable) {
                    const percentComplete = (event.loaded / event.total) * 100;
                    progressBar.style.width = percentComplete + '%';
                }
            };

            xhr.onload = function () {
                if (xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText);
                    alert(currentLanguage === 'en' ? response.message : '文件上传成功');
                    console.log(response.info);
                } else {
                    alert(currentLanguage === 'en' ? 'Upload failed.' : '文件上传失败');
                }
                progressContainer.style.display = 'none'; // 隐藏进度条
            };

            xhr.onerror = function () {
                alert(currentLanguage === 'en' ? 'Upload failed.' : '文件上传失败');
                progressContainer.style.display = 'none'; // 隐藏进度条
            };

            xhr.send(formData);
        });
    </script>
</body>
</html>